<template>
    <div class="chart-wrapper">
        <p class="chart-title">工作年限</p>
        <div class="chart-content" ref="dom"></div>
    </div>
</template>

<script>
    export default {
        name: "WorkChart",
        data() {
            return {
                chart: null,
                chartData: []
            }
        },
        mounted() {
        },
        methods: {
            updateChart(data) {
                this.chartData = data;
                let option = this.initOption();
                this.chart = this.$echarts.init(this.$refs.dom);
                this.chart.setOption(option);
            },
            initOption() {
                return {
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        top: '20px',
                        left: '2%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.chartData.map(item => item.label),
                            axisLabel: {
                                interval: 0
                            },
                            axisTick: {
                                //坐标轴刻度相关设置。
                                show: false,
                            }
                        }
                    ],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [
                        {
                            name: '工作年限',
                            type: 'bar',
                            barWidth: '60%',
                            data: this.chartData.map(item => item.value),
                            itemStyle: {
                                color: (params) => {
                                    let colors = ['#3A69C9', '#4cd698', '#ed7c2f', '#f2a93b', '#f9cf36', '#4a5bdc'];
                                    return colors[params.dataIndex]
                                }
                            },
                            label: {
                                show: true,
                                position: 'top',
                                color: ['#3A69C9']
                            },
                        }
                    ]
                };
            }
        }
    };
</script>

<style scoped lang="scss">
    $h: 25px;
    .chart-wrapper {
        width: 100%;
        height: 100%;

        .chart-title {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 2%;
            height: $h;
        }

        .chart-content {
            width: 100%;
            height: calc(100% - #{$h});
        }
    }
</style>
